<template>
    <div ref="dom"></div>
</template>

<script>
import echarts from 'echarts'
import { on, off } from '@/libs/tools'
export default {
  name: 'serviceRequests',
  data () {
    return {
      dom: null
    }
  },
  methods: {
    resize () {
      this.dom.resize()
    }
  },
  mounted () {
    const option = {
      title: {
        text: '年龄区间各项分布图'
      // x: 'center'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999'
          }
        }
      },
      toolbox: {
        feature: {
          dataView: { show: true, readOnly: false },
          magicType: { show: true, type: ['line', 'bar'] },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      legend: {
        data: ['男生', '女生', '高中学历', '大专学历', '本科学历']
      },
      xAxis: [
        {
          type: 'category',
          data: ['20-25', '25-30', '30-35', '35-40', '40-45', '45-50', '50-55', '55-60', '60以上'],
          axisPointer: {
            type: 'shadow'
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          name: '人数',
          // interval: 50,
          axisLabel: {
            // formatter: '{value} ml'
          }
        }
      ],
      series: [
        {
          name: '男生',
          type: 'bar',
          data: [1100, 500, 2000, 3200, 800, 720, 900, 500, 200]
        },
        {
          name: '女生',
          type: 'bar',
          data: [200, 100, 300, 600, 200, 120, 400, 300, 50]
        },
        {
          name: '高中学历',
          type: 'line',
          data: [1100 - 500, 500 - 200, 2000 - 1000, 3200 - 200, 800 + 600, 720 - 300, 900 + 400, 500 - 10, 200 + 30]
        },
        {
          name: '大专学历',
          type: 'line',
          data: [1100 + 500, 500 - 100, 2000 - 400, 3200 - 2000, 800 - 600, 720 + 300, 900 - 400, 500 + 10, 200 - 30]
        },
        {
          name: '本科学历',
          type: 'line',
          data: [1100 - 800, 500 - 300, 2000 - 1200, 3200 - 2200, 800 + 600, 720 - 300, 900 + 200, 500 + 300, 200 - 100]
        }
      ]
    }
    this.$nextTick(() => {
      this.dom = echarts.init(this.$refs.dom)
      this.dom.setOption(option)
      on(window, 'resize', this.resize)
    })
  },
  beforeDestroy () {
    off(window, 'resize', this.resize)
  }
}
</script>
